<template>
  <div>

    <div style="margin-left: 30px;background-color: #FCF0C6;width: 1200px;height: 100px;margin-top: 60px">
      <br>
      <p align="center" style="margin-top: 10px"><b>维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</b></p>
      <p style="margin-left: 73px"><font color="#dc143c"><b>确保您的隐私不被泄露，请勿填写虚假信息。</b></font></p>
    </div>

    <div style="margin-top: 60px;margin-left: 30px">
      <el-row :gutter="0">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="109px">
          <el-col :span="7">
            <el-form-item label="收房合同编号" prop="sfNumber">
              <el-input v-model="formData.sfNumber" placeholder="请输入收房合同编号" :maxlength="11" clearable readonly
                        prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-button style="margin-left: 50px" type="primary" icon="el-icon-search" size="medium" @click="sflist"> 收房合同查询 </el-button>
          <el-dialog title="收房合同查询" :visible.sync="dialogTableVisible">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">
              <el-form-item label="小区名称">
                <el-input v-model="queryParams.premiseName" placeholder="小区名称"></el-input>
              </el-form-item>
              <el-form-item label="业主姓名">
                <el-input v-model="queryParams.ownerName" placeholder="业主姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="sflist">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="gridData">
              <el-table-column property="owner_name" label="业主姓名"></el-table-column>
              <el-table-column property="house_name" label="房产信息"></el-table-column>
              <el-table-column property="con_sign_time" label="签约日期"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="sc">
                  <el-button type="warning" icon="el-icon-search" size="medium" @click="checkAt(sc.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="sflist"
            />
          </el-dialog>
          <br> <br>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="房产信息" prop="houseMessage">
                  <el-input v-model="formData.houseMessage" placeholder="房产信息" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="业主姓名" prop="ownerName">
                  <el-input v-model="formData.ownerName" placeholder="业主姓名" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="业主手机号" prop="ownerTelephone">
                  <el-input v-model="formData.ownerTelephone" placeholder="业主手机号" clearable readonly
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="业主身份证号" prop="ownerIdcard">
                  <el-input v-model="formData.ownerIdcard" placeholder="业主身份证号" clearable readonly
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="银行卡号" prop="bankIDcard">
                  <el-input v-model="formData.bankIDcard" placeholder="银行卡号" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="银行名称" prop="bankName">
                  <el-input v-model="formData.bankName" placeholder="银行名称" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="开户行" prop="openBank">
                  <el-input v-model="formData.openBank" placeholder="开户行" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <hr width="1000px" align="left">
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="金融产品选择" prop="jrProduce">
                  <el-select @change="changeprodect" v-model="formData.jrProduce" placeholder="金融产品选择" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in jrProduceOptions" :key="index" :label="item.jr_product_name"
                               :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年利率" prop="nll">
                  <el-input v-model="formData.nll" placeholder="年利率" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="借款期限" prop="jkqx">
                  <el-input v-model="formData.jkqx" placeholder="借款期限" readonly clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="授信额度" prop="sxed">
                  <el-input v-model="formData.sxed" placeholder="授信额度" readonly clearable :style="{width: '100%'}">%
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="6">
                <el-form-item label="借款金额" prop="jqje">
                  <el-input v-model="formData.jqje" placeholder="借款金额" :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年一次性服务费率" prop="fwf">
                  <el-input v-model="formData.fwf" placeholder="年一次性服务费率" :style="{width: '100%'}">%
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>


          <div style="margin-left: 900px">
            <el-button type="primary" icon="el-icon-search" @click="listfenqi" size="medium"> 分期计算详情 </el-button>
          </div>

          <div v-if="table==true">
            <el-table :data="tableData" style="width: 100%" >
              <el-table-column prop="no" label="序号" width="180"></el-table-column>
              <el-table-column prop="realEstateInfo" label="房产信息" width="180"></el-table-column>
              <el-table-column prop="roomCode" label="房源编号" width="180"></el-table-column>
              <el-table-column prop="monthRepaymentAmount" label="账期还款金额" width="180"></el-table-column>
              <el-table-column prop="monthRateAmount" label="账期利息" width="180"></el-table-column>
              <el-table-column prop="endLoanday" label="还款期限" width="180"></el-table-column>
            </el-table>
            <el-col :span="8">
              <el-form-item label-width="150px" label="应付租约合计" prop="jqje">
                <el-input v-model="datas.re_lease_count" placeholder="应付租约合计" readonly :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="150px" label="还款总额合计" prop="fwf">
                <el-input v-model="datas.co_hirerent_count" placeholder="还款总额合计"  readonly :style="{width: '100%'}">%</el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="150px" label="服务费" prop="jkqx">
                    <el-input v-model="datas.ser_charge" placeholder="服务费" readonly :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label-width="150px" label="收房贷利息合计" prop="sxed">
                    <el-input v-model="datas.in_interest_count" placeholder="收房贷利息合计" readonly :style="{width: '100%'}">%</el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </div>

          <el-col :span="24">
            <el-form-item label="备注" prop="field125">
              <el-input v-model="formData.field125" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '40%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import { sfselect,listprodect,changepro,listSfLoan } from "@/api/finance/financeHouseloan";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        sfNumber: '',
      houseMessage: undefined,
      ownerName: undefined,
      ownerTelephone: undefined,
      ownerIdcard: undefined,
      bankIDcard: undefined,
      bankName: undefined,
      openBank: undefined,
      jrProduce: undefined,
      nll: undefined,
      jkqx: undefined,
      sxed: undefined,
      field125: undefined,
      start_date:'',
      end_date:'',
    },
      queryParams:{
        pageNum:1,
        pageSize:10,
        premiseName:'',
        ownerName:'',
      },
      counts:{
        cf_contract_no:'',
        jqje:'',
        jkqx:'',
        sxed:'',
        nll:'',
        zkcd:'',
        gscd:'',
        fwf:'',
        house_id:'',
        end_date:'',
        start_date:'',
        room_name:'',
      },
      total: 0,
      dialogTableVisible:false,
      gridData:{},
    rules: {
      sfNumber: [{
        required: true,
        message: '请输入收房合同编号',
        trigger: 'blur'
      }, {
        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
        message: '手机号格式错误',
        trigger: 'blur'
      }],
        houseMessage: [{
        required: true,
        message: '房产信息',
        trigger: 'blur'
      }],
        ownerName: [{
        required: true,
        message: '业主姓名',
        trigger: 'blur'
      }],
        ownerTelephone: [{
        required: true,
        message: '业主手机号',
        trigger: 'blur'
      }],
        ownerIdcard: [{
        required: true,
        message: '业主身份证号',
        trigger: 'blur'
      }],
        bankIDcard: [{
        required: true,
        message: '银行卡号',
        trigger: 'blur'
      }],
        bankName: [{
        required: true,
        message: '银行名称',
        trigger: 'blur'
      }],
        openBank: [{
        required: true,
        message: '开户行',
        trigger: 'blur'
      }],
        jrProduce: [{
        required: true,
        message: '金融产品选择',
        trigger: 'change'
      }],
        nll: [{
        required: true,
        message: '年利率',
        trigger: 'blur'
      }],
        jkqx: [{
        required: true,
        message: '借款期限',
        trigger: 'blur'
      }],
        sxed: [{
        required: true,
        message: '授信额度',
        trigger: 'blur'
      }],
        field125: [{
        required: true,
        message: '请输入备注',
        trigger: 'blur'
      }],
    },
      tableData:{},
      datas:{

      },
    jrProduceOptions: [],
      table:false,
  }
  },
  computed: {},
  watch: {},
  created() {
    this.getlist();
  },
  mounted() {},
  methods: {
    //分期详情
    listfenqi(){
      this.table=true;
      this.counts.cf_contract_no=this.formData.sfNumber;
      this.counts.jqje=this.formData.jqje;
      this.counts.room_name=this.formData.houseMessage
      this.counts.jkqx=this.formData.jkqx;
      this.counts.sxed=this.formData.sxed;
      this.counts.nll=this.formData.nll;
      this.counts.fwf=this.formData.fwf;
      this.counts.start_date=this.formData.start_date;
      this.counts.end_date=this.formData.end_date;

      // console.log("前端往后端传参"+JSON.stringify(this.counts));
      listSfLoan(this.counts).then(res=>{
          console.log(res);
          this.tableData=res.spList;
          this.datas.ser_charge=res.counts1.ser_charge;
          this.datas.re_lease_count=res.counts1.re_lease_count;
          this.datas.co_hirerent_count=res.counts1.co_hirerent_count;
          this.datas.in_interest_count=res.counts1.in_interest_count;
      })
    },
    //改变下拉框状态回显其他文本框数据
    changeprodect(){
      console.log(this.formData.jrProduce);
      changepro(this.formData.jrProduce).then(res=>{
          console.log(res);
          this.formData.sxed=res.credit_line;
          this.formData.jkqx=res.instalment_period;
      })
    },
    //下拉框选择
    getlist(){
      listprodect().then(res=>{
        console.log(res);
        this.jrProduceOptions=res;
      })
    },
    //选中收房合同
    checkAt(row){
      /*console.log("选中数据"+JSON.stringify(row));*/

      this.formData.sfNumber=row.sf_contract_no;
      this.formData.houseMessage=row.house_name;
      this.formData.ownerName=row.owner_name;
      this.formData.ownerIdcard=row.owner_id_card;
      this.formData.ownerTelephone=row.owner_mobile;
      this.formData.bankName=row.bank_name;
      this.formData.bankIDcard=row.bank_card;
      this.formData.openBank=row.bank_open;
      this.formData.start_date=row.lease_start_time;
      this.formData.end_date=row.lease_end_time;
      this.dialogTableVisible=false;
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    //收房合同查询
    sflist(){
      this.dialogTableVisible=true;
      sfselect(this.queryParams).then(res=>{
          console.log(res);
          this.gridData=res.list;
          this.queryParams.pageNum=res.pageNum;
        this.queryParams.pageSize=res.pageSize;
        this.total=res.total;
      })
    }
  }
}

</script>
<style>
</style>
